<template>
    <transition name="xpDialog">
        <div class="islandOption-dialog" v-if="visible">
            <div class="flex-between islandOption-dialog-header">
                <p>
                    灵动岛配置
                </p>
                <el-icon @click="handleClose"><CloseBold /></el-icon>
            </div>
            <div class="islandOption-dialog-body scrollbar">
                <div class="islandOption-item">
                    <div class="flex-between options-item">
                        <p class="option-slider-title">位置</p>
                        <div class="flex-center full-w">
                            <el-slider v-model="options.left" :min="15" :max="85" @input="(val) => handleChange(val + '%', 'left')"/>
                        </div>
                        <span class="option-slider-value">{{options.left}}%</span>
                    </div>
                    <div class="flex-between options-item">
                        <p class="option-slider-title">圆角</p>
                        <div class="flex-center full-w">
                            <el-slider v-model="options.borderRadius" :min="10" :max="30" @input="(val) => handleChange(val + 'px', 'borderRadius')" />
                        </div>
                        <span class="option-slider-value">{{options.borderRadius}}px</span>
                    </div>

                    <div class="flex-between options-item">
                        <p class="option-slider-title">透明度</p>
                        <div class="flex-center full-w">
                            <el-slider v-model="options.opacity" :min="1" :max="10" @input="(val) => handleChange(val / 10, 'opacity')"/>
                        </div>
                        <span class="option-slider-value">{{options.opacity}}px</span>
                    </div>

                    <div class="flex-between options-item">
                        <p class="option-slider-title">字体大小</p>
                        <div class="flex-center full-w">
                            <el-slider v-model="options.fontSize" :min="12" :max="17" @input="(val) => handleChange(val + 'px', 'fontSize')"/>
                        </div>
                        <span class="option-slider-value">{{options.fontSize}}px</span>
                    </div>
                </div>
                <div class="islandOption-item">
                    <div class="flex-between options-item">
                        <p class="option-slider-title">背景颜色</p>
                        <el-color-picker v-model="options.backgroundColor" color-format="hex" show-alpha @active-change="(val) => handleChange(val, 'backgroundColor')" />
                    </div>

                    <div class="flex-between options-item">
                        <p class="option-slider-title">字体颜色</p>
                        <el-color-picker v-model="options.color" color-format="hex" show-alpha @active-change="(val) => handleChange(val, 'color')"/>
                    </div>
                </div>
            </div>
            <div class="dialog-footer text-center">
                <el-button type="primary" @click="handleReset">重 置</el-button>
            </div>
        </div>
    </transition>

 </template>
 
<script lang='ts'>
import { reactive, toRefs, watch, getCurrentInstance, ref, provide, onMounted } from 'vue';
import { useAppStore } from '@/store/app';
export default {
    name:'islandOption',
    props: {
        visible:{
            type:Boolean,
            default:false
        }
    },
    components: {
    },
    emits:['close', 'open', 'menu'],
    setup (props, context) 
    {
        const appStore = useAppStore();
        const { proxy }:any = getCurrentInstance();
        let data = reactive({
            options:{
                left:0,
                borderRadius:0,
                opacity:0,
                color:'',
                backgroundColor:'',
                fontSize:0
            }
        });
        let methods = {
            handleClose ()
            {
                context.emit('close');
            },
            handleReset ()
            {
                data.options = {
                    left:50,
                    borderRadius:80,
                    opacity:10,
                    color:'',
                    backgroundColor:'',
                    fontSize:14
                };
            },
            handleChange (value, attribute)
            {
                appStore.updateIslandOptions(attribute, value);
            }
        };

        onMounted(() => 
        {
            let options = JSON.parse(JSON.stringify(appStore.islandOptions));
            let keys = Object.keys(options);
            for (let key of keys)
            {
                if (key !== 'backgroundColor' && key !== 'color')
                {
                    let current = options[key].toString();
                    let newValue = current.replace(/[^\d]/g, '');
                    if (key === 'opacity') 
                    {
                        data.options[key] = Number(newValue) * 10;
                    }
                    else
                    {
                        data.options[key] = Number(newValue);
                    }
                }
                else
                {
                    data.options[key] = options[key];
                }
            }
            
        });

        return { 
            ...toRefs(data),
            ...methods,
            appStore
        };
    }
};
</script>
 
<style scoped lang="scss">
.islandOption-dialog {
    position: absolute;
    top:10%;
    left: 50%;
    background-color: var(--el-bg-color-menu);
    transform: translate(-50%, 0);
    width: 500px;
    height: auto;
    padding: 10px 20px;
    border-radius: 10px;
    box-shadow: 0 0 5px $ShadowColor;
    // min-height: 600px;
}

.islandOption-dialog-header {
    height: 30px;
    font-size: 16px;
    font-weight: 600;

    p {
        width: 100%;
        text-align: center;
    }

    i {
        font-size: 16px;
        cursor: pointer;

        &:hover {
            color:$PrimaryColor;
        }
    }
}
.islandOption-dialog-body {
    height: calc(100% - 55px);
    max-height:calc(100% - 55px);
    overflow-y: auto;
    margin-top: 15px;
    font-size: 14px;

    .islandOption-item {
        background-color:var(--el-bg-color-page);
        border-radius: 10px;
        padding: 10px 15px;
        margin: 10px 0;
        display: flex;
        flex-direction: column;

        .options-item {
            margin: 12px 0;

            .option-slider-title {
                min-width: 65px;
            }

            .option-slider-value {
                min-width: 60px;
                text-align: right;
            }
        }
    }
    
}

.dialog-footer {
    width: 100%;
    padding: 20px 0;

    button {
        width: 100%;
    }
}

</style>
 